import React from 'react';

import Model from '../components/model';
import Button from '../components/button';

import YmtApi from 'YmtApi';

const searchParams = YmtApi.utils.getUrlObj();

let FormDialog = React.createClass({
	getInitialState(){
		return {
			msgTxt:'',
			isSendMsgCode:true
		}
	},
	//在该函数中调用 this.setState() 将不会引起第二次渲染。
	componentWillReceiveProps(nextProps){
		const { resetCountDown = false } = this.props;
		
		if(resetCountDown){
			clearInterval(this.timer);
			this.setState({
				msgTxt:'',
				isSendMsgCode:true
			});
		}
	},
	shouldComponentUpdate (nextProps,nextState){
		return nextState.msgTxt !== this.state.msgTxt || nextProps.show !== this.props.show;
	},
	onSendMsgCode(){
		const { UserId , AccessToken } = YmtApi.utils.getAuthInfo();

		const { actions,showToast } = this.props;
		const { value } = this.refs.mobile;

		if(!value){
			return showToast('请填写手机号码')
		}

		if(!/^\d{11}$/.test(value)){
			return showToast('请填写正确手机号码')
		}

		if(this.state.isSendMsgCode){
			actions.sendValidateCode({
				AccessToken,
				phone:value
			},(result)=>{
				showToast('验证码发送成功')
			});
			clearInterval(this.timer);
			this.setState({
				msgTxt:'60s后重试',
				isSendMsgCode:false
			});
			this.timer = setInterval(()=>{
				let seconds = parseInt(this.state.msgTxt) - 1;
				if(seconds){
					this.setState({msgTxt:seconds+'s后重试'});
				}else{
					clearInterval(this.timer);
					this.setState({
						msgTxt:'',
						isSendMsgCode:true
					});
				}
			},1E3);
		}
	},
	onBindMobile(){

		const { actions,showToast,bindMobileFn,mobelBinedFn,onHideDialog } = this.props;
		const { AccessToken } = YmtApi.utils.getAuthInfo();

		actions.bindMobile({
			AccessToken,
			phone:this.refs.mobile.value,
			pcode:this.refs.msgCode.value,
			unionId:searchParams.unionId,
			openId:searchParams.openId,
			wxToken:searchParams.wxToken
		},(result)=>{
			let token = result.Data.AccessToken;
			YmtApi.sendEvent('userStatusChange',{
				AccessToken:token
			});
			var date = new Date();
			var expireTime = 2 * 60 * 60 * 1000;
			date.setTime(date.getTime() + expireTime);
			document.cookie = 'AccessToken=' + token + ';expires=' + date.toGMTString();

			onHideDialog();
			bindMobileFn && bindMobileFn();
		},(result)=>{
			if(result.BCode == 503 || result.BCode == 505){
				onHideDialog()
				return mobelBinedFn && mobelBinedFn(result.Msg,result.BCode == 503)
			}
			showToast(result.Msg)
		});
	},
	onChangeCanSubmit(){
		// let hasError = false;
		// for(let i in this.refs){
		// 	if(!this.refs[i].value){
		// 		hasError = true;
		// 	}
		// }
		// if(!hasError){
		// 	this.setState({
		// 		isBindSubmit:true
		// 	})
		// }else{
		// 	this.setState({
		// 		isBindSubmit:false
		// 	})
		// }
	},
	render (){ 
		const { show,onHideDialog,bindMobileTxt }  = this.props;

		return (
			<Model show={show}>
				<div className="model-dialog bottom bottom-form-dialog">
					<div className="model-content">
						<div className="model-dialog-hd">
							{bindMobileTxt}需要绑定手机
							<span className="close-btn pull-right"  
							      onClick={onHideDialog}>X</span>
						</div>
						<div className="model-dialog-bd">
							<div className="form-row">
								<input type="text" 
									   placeholder="输入手机号" 
									   ref="mobile"
									   onInput={this.onChangeCanSubmit} />
							</div>
							<div className="form-row">
								<input type="text" 
								       placeholder="输入短信校验码" 
								       ref="msgCode"
								       onInput={this.onChangeCanSubmit} 
								       maxLength="6"/>
								<Button className={"btn btn-primary btn-sm send-code-btn"+(this.state.msgTxt?' invalid':'')}
										onClick={this.onSendMsgCode}>{this.state.msgTxt || '获取短信校验码'}</Button>
							</div>
							<Button className={"btn btn-full btn-primary confirm-btn"}
									onClick={this.onBindMobile}>确认绑定并{bindMobileTxt}</Button>
						</div>
						<div className="model-dialog-ft">
							<div className="tips">
								哈尼，如收不到短信验证码，<br/>
								请联系洋管家微信账户ymatou1，工作时间：每天9:00-24:00。
							</div>
						</div>
					</div>
				</div>
			</Model>
		)
	}
});

export default FormDialog;